<template>
  <div>
    <img class="pagebg" src="https://www.veer.com/photo/145588737" />

    <div class="default">
      <img class="aver" :src="categorydetail.imgUrl" />
      <div class="right">
        <div class="name">
          {{ categorydetail.title || "好先生和皓先生" }}
          <div class="nums">{{ categorydetail.playCount || 516511 }}播放</div>
        </div>
        <div class="detail detail_on" v-if="categorydetail.desc">
          {{ categorydetail.desc }}
        </div>
        <div v-if="categorydetail.desc" class="detail_more" @click="descmore">更多》</div>
        <div class="control">
          <div class="comments" @click="comments"></div>
          <div class="share" @click="share"></div>
          <div class="collect" @click="collect" v-if="!iscollect"></div>
          <div class="collect on" @click="delcollect" v-else></div>
          <!-- <div class="download" @click="download(currentSong.id,currentSong.audioUrl,currentSong.title)"></div> -->
          <a class="download" :href="currentSong.audioUrl" :download="currentSong.title" target="_blank" data-id="currentSong.id" ></a>
        </div>
      </div>
      <div class="bottom">
        <!-- <audio
          controls
          id="myAudio"
          ref="myAudio"
          preload="auto"
          style="display: none"
          @timeupdate="onTimeupdate"
          :src="currentSong.audioUrl"
          @ended="onEnded"
        >
          <source :src="currentSong.audioUrl" ref="msource" type="audio/mp3" />
          您的浏览器不支持音频播放
          <source src="https://youyang-cdn.mdshuzhi.com//upload/20200901/1598955862750_374888.mp3" ref="msource" type="audio/wav" />您的浏览器不支持音频播放
        </audio> -->
        <!-- 音乐进度条 -->
        <div class="process" ref="progressBarLine">
          <div
            class="progressBarLine"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
          >
            <div class="current" :style="'width:' + percent + '%'">
              <span
                ref="barLine"
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
              ></span>
            </div>
          </div>
        </div>
        <div class="bottom-right">
          <div class="mode">
            <div class="img1" v-if="playMod == 3" @click="changeMod"></div>
            <div class="img2" v-if="playMod == 1" @click="changeMod"></div>
            <div class="img3" v-if="playMod == 2" @click="changeMod"></div>
          </div>
          <div class="play paused">
            <div class="img1" v-if="play == 1" @click="togglePlaying"></div>
            <div class="img2" v-if="play == 2" @click="togglePlaying"></div>
          </div>
          <div class="settime" @click="setTimeBtn">
            <div class="text">定时</div>
            <span class="time" v-if="closetimeval>0">{{ closetimecurrent }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 音频列表 -->
    <div class="lists">
      <div class="top" v-if="tabs.length">
        <div class="more" @click="playall">
          <img
            src="https://youyang-cdn.mdshuzhi.com/upload/icon_playall.png"
          />播放全部
        </div>
        <div
          class="item"
          v-for="(item, index) in tabs"
          :key="index"
          :class="index == ishot ? 'on' : ''"
          @click="changeTabs(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="con" v-if="tabs[ishot].audiolist.length>0">
        <scroller :on-infinite="infinite" ref="myscroller" class="scroll">
          <div
            v-for="(item, index) in tabs[ishot].audiolist"
            :key="index"
            class="item"
            @click="goPlay(item.id,index)"
          >
            <div class="key">{{ index + 1 }}</div>
            <div class="pic">
              <img :src="item.imgUrl" />
            </div>
            <div class="right">
              <div class="name">
                <span class="n">{{ item.title || "好先生和皓先生" }}</span>
              </div>
              <div class="nums">
                {{ item.duration || "30:45" }} |
                {{ item.playCount || "655665" }}人播放
              </div>
            </div>
            <router-link to v-if="item.hasVideo == 1 && item.videoLink">
              <img
                class="play"
                src="../../../static/images/icon_play4@2x.png"
              />
            </router-link>
            <router-link to v-else>
              <img
                class="play"
                src="../../../static/images/icon_play4@2x.png"
              />
            </router-link>
          </div>
        </scroller>
      </div>
    </div>
    <!-- 定时 -->
    <mt-popup
      v-model="closetimeFlag"
      class="set-time-wrap"
      position="bottom"
      v-if="closetime.length > 0"
    >
      <div class="set-time">
        <div
          class="time-item"
          :class="index == closetimeindex ? 'on' : ''"
          v-for="(item, index) in closetime"
          :key="index"
          @click="selectpacker(item, index)"
        >
          <div class="time-name">{{ item.name }}</div>
          <div class="time" v-if="item.value > 0">
            倒计时 {{ closetimecurrent }}
          </div>
          <div class="check"></div>
        </div>
      </div>
      <div class="btn" @click="closePopup">关闭</div>
    </mt-popup>
    <!-- 列表弹出窗 -->
    <transition name="fade">
        <div class="listShadow" v-show="isShowPicker">
          <div class="shadow" @click="isShowPicker && cancleBtn()"></div>
            <div class="showList">
                <!-- 线条 -->
                <div class="topLineBox">
                    <span class="line"></span>
                </div>
                <!-- 弹出窗内容区 -->
                <div class="contentBox">
                    <!-- 音频简介 0-->
                    <div class="AudioIntroduction">
                        <span>{{ categorydetail.title || "好先生和皓先生" }}</span>
                        <div class="contentWord">
                            <scroller ref="myscroller" class="scrollIntro">{{categorydetail.desc}}</scroller>
                        </div>
                    </div>
                </div>
                <!-- 收起 -->
                <div @click="cancleBtn" class="cancleBtn">收起</div>
            </div>
        </div>
    </transition>
    <Footer :current="'1'"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/layer/footer";
import controller from "@/components/controllers/controllers";
import { Toast, MessageBox } from "mint-ui";
import { randomNum } from "@/utils/filters";

const SEQUENCE_MODE = 1;
const RANDOM_MOD = 2;
const SINGLE_CYCLE_MOD = 3;
export default {
  name: "albumDetail",
  components: {
    Footer,
  },
  data() {
    return {
      isShowPicker: false, //弹出窗显示
      firstAudioDetaildata: "",
      mode: 1,
      play: 1,
      audioListdata: [],
      ishot: 0,
      tabs: [
        { name: "最HOT", sortBy: 2, page: 1, audiolist: [], lastPage: false },
        { name: "最新", sortBy: 1, page: 1, audiolist: [], lastPage: false },
      ],
      isEnd: false,
      topic: "专题",
      progressValue: 45,
      currentTime: 0,
      playurl: "",
      currentSong: {},
      playMod: SEQUENCE_MODE,
      closetime: [
        {
          name: "不开启",
          value: 0,
        },
        {
          name: "15分钟后自动关闭",
          value: 900,
        },
        {
          name: "30分钟后自动关闭",
          value: 1800,
        },
        {
          name: "60分钟后自动关闭",
          value: 3600,
        },
        {
          name: "120分钟后自动关闭",
          value: 7200,
        },
        {
          name: "240分钟后自动关闭",
          value: 14400,
        },
      ],
      closetimeindex: "",
      closetimeFlag: false,
      closetimeval: 0,
      closetimecurrent: 0,
      percent: 0,
      settimebool: true,
      iscollect: false,
      compilationId: 0,
      categorydetail: {},
      Collectid: "", //收藏的id
      isTouchProgress: false,
      lineWidth: 0,
      lineLeft: 0,
      timer: "", //定时器
    };
  },
  created() {
    this.compilationId = this.$route.query.id;
    this.getCategoryDetail();
    this.getAudioList(0); //默认最hot  播放列表
    window.addEventListener('mousewheel',this.handleScroll);
  },
  destroyed(){
    window.removeEventListener('mousewheel',this.handleScroll)
  },
  watch: {
    percent(newVal) {
      if (newVal == 100) {
        this.payNext();
      }
    },
  },
  methods: {
    handleScroll(e){
      let that = this  //此this指向的是vue
      console.log(e.wheelDelta)
      if (e.wheelDelta < 0) {
          that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
      } else {
        that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
      }
    },
    //播放全部
    playall() {
      if(this.play == 1){
        if(this.audioListdata.length==0){
          MessageBox.alert('暂无数据')
          return
        }
        this.play = 2
        var that=this;
        this.currentSong = this.tabs[this.ishot].audiolist[0];
        this.currentSong.idx = 0;
        this.goPlay(this.currentSong.id,0)
        myAudio.play()
        that.$updateScore(5,this.currentSong.id)
        // setTimeout(function(){
        // },200)
      }
    },
    goPlay(id, index) {
      this.$store.commit("setCurrentIndex", index);
      this.$store.commit("setSonglist",this.tabs[this.ishot].audiolist);
      this.$router.push({
        path: "/Playing",
        query: {
          audioId: id,
          categoryId: this.compilationId,
        },
      });
    },
       //show模态框
    showMessageBox(message, done) {
      MessageBox.confirm("", {
        title: "提示",
        message: message,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then((action) => {
          if (action == "confirm") {
            console.log("done", typeof done);
            done();
          }
        })
        .catch((error) => {
          if (error == "cancel") {
            console.log("点击取消");
          }
        });
    },
    changeTabs(index) {
      this.ishot = index;
      //最新 1   最hot 0
      this.tabs[index].page = 1;
      console.log(this.tabs[index].page);
      this.getAudioList(index);
    },
    //获取头部信息
    getCategoryDetail() {
      let _self = this;
      controller
        .compilationDetail({
          compilationId: this.compilationId,
        })
        .then((res) => {
          console.log(res);
          this.categorydetail = res.baseData;
          this.getCheckCollect();

        });
    },
    getCheckCollect() {
      console.log(this.categorydetail.id);
      let _self = this;
      controller
        .checkCollect({
          rid: this.categorydetail.id,
          type: 1,
        })
        .then((res) => {
          if (res.data.baseData !== null) {
            console.log(222);
            _self.iscollect = true;
            _self.Collectid = res.data.baseData;
          } else {
            _self.iscollect = false;
          }
        });
    },
    // 收藏
    collect() {
        console.log(22);
      if (!localStorage.getItem("token")) {
        this.$toLogin();
      } else {
        console.log("收藏");
        this.iscollect = true;
        let data = {
          rid: this.categorydetail.id || "",
          type: 1,
          bodyId: 2,
        };
        controller.collect(data).then((res) => {
          this.getCheckCollect();
          Toast("收藏成功");
          this.$updateScore(9)
        });
      }
    },
    // 取消收藏
    delcollect() {
        console.log(this.Collectid);
      if (!localStorage.getItem("token")) {
        this.$toLogin();
      } else {
        console.log("取消收藏");
        let _self = this;
        this.showMessageBox("是否取消收藏", () => {
          controller
            .delCollect({
              ids: this.Collectid,
            })
            .then((res) => {
              _self.getCheckCollect();
            });
        });
      }
    },
    //播放列表
    async getAudioList(type) {
      const params = {
        compilationId: Number(this.compilationId),
        page: this.tabs[type].page,
        sortBy: type == 0 ? 2 : 1,
      }
      controller.audioList(params).then(res=>{
        this.tabs[this.ishot].audiolist.push(...res.baseData.list);
        this.audioListdata = this.tabs[this.ishot].audiolist;
        this.tabs[type].lastPage = res.baseData.lastPage;
        this.currentSong = this.audioListdata[0];
        this.currentSong.idx = 0;
      }).finally(()=>{
        if(this.currentSong.idx == 0){
          this.lineWidth = this.$refs.progressBarLine.offsetWidth;
          this.lineLeft = this.$refs.progressBarLine.offsetLeft;
        }
      })
    },
    /*秒前边加0*/
    _pad(num, n = 2) {
      let len = num.toString().length;
      while (len < n) {
        num = "0" + num;
        len++;
      }
      return num;
    },
    _formatSecod(time) {
      time = time || 0;
      if (typeof time == "string") {
        var min = time.split(":")[0];
        var sec = time.split(":")[1];
        var s = Number(min * 60) + Number(sec);
      }
      return s;
    },
    _formatTime(interval) {
      interval = interval || 0;
      const minute = Math.floor(interval / 60 || 0);
      const second = this._pad(interval % 60);
      return `${minute}:${second}`;
    },
    //打开定时
    setTimeBtn() {
      this.closetimeFlag = true;
    },
    //关闭定时
    closePopup() {
      this.$nextTick(() => {
        this.closetimeFlag = false;
      });
    },
    //选择定时的时间
    selectpacker(item, index) {
      if (index == this.closetimeindex) {
        return;
      }
      this.closetimeindex = index;
      this.closetimeval = item.value;
      this.closetimecurrent = this._formatTime(item.value);
      if (item.value <= 0) {
        if (this.timer) {
          clearInterval(this.timer);
        }
      } else {
        this.setTimeFun(item.value);
      }
    },
    //定时器
    setTimeFun(val) {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = window.setInterval(() => {
        val--;
        if (val <= 0) {
          myAudio.pause();
          clearInterval(this.timer);
        }
        this.closetimeval = val;
        this.closetimecurrent = this._formatTime(val);
      }, 1000);
    },
    // 进度条事件
    handleTouchStart(e) {
      this.isTouchProgress = true;
      this.percent =
        ((e.touches[0].clientX - this.lineLeft) / this.lineWidth) * 100;
    },
    // 滑动进度条
    handleTouchMove(e) {
      if (e.touches[0].clientX < this.lineLeft) {
        this.percent = 0;
      } else if (e.touches[0].clientX >= this.lineWidth + this.lineLeft) {
        this.percent = 99.99;
      } else {
        this.percent =
          ((e.touches[0].clientX - this.lineLeft) / this.lineWidth) * 100;
      }
      const progressBarLeft = (this.percent / 100) * this.lineWidth + "px";
      this.$refs.barLine.style.left = progressBarLeft;
    },
    //播放更新进度条
    onTimeupdate() {
      if (myAudio.duration != NaN && myAudio.duration != undefined) {
        if (!this.isTouchProgress) {
          this.currentTime = this._formatTime(myAudio.currentTime);
          this.percent = (myAudio.currentTime / myAudio.duration) * 100;
          const progressBarLeft = (this.percent / 100) * this.lineWidth + "px";
          this.$refs.barLine.style.left = progressBarLeft;
        }
      }
    },
    onEnded() {
      controller
        .uploadListenTimes({
          seconds: parseInt(myAudio.currentTime),
        })
        .then((res) => {});
    },
    //放开进度条
    handleTouchEnd() {
      this.currentTime = this._formatTime(
        (this.percent / 100) * this._formatSecod(this.currentSong.duration)
      );
      console.log("currentTime", this.currentTime);
      myAudio.currentTime = this._formatSecod(this.currentTime);
      var that=this;
      setTimeout(function(){
        myAudio.play()
        if(this.currentSong)
        that.$updateScore(5,this.currentSong.id)
      },200)
      this.play = 2;
      this.isTouchProgress = false;
    },
    // 下一首歌曲的索引
    getNextIndex() {
      let ret,
      currentIndex = Number(this.currentSong.idx),
      mod = this.playMod,
      len = this.audioListdata.length || 1;
      // 随机
      if (mod == RANDOM_MOD) {
        ret = randomNum(0,len-1);
      } else if (mod == SINGLE_CYCLE_MOD) {
        ret = currentIndex;
      } else {
        ret = currentIndex + 1 == len ? 0 : currentIndex + 1;
      }
      return ret;
    },
    //播放下一首
    payNext() {
      console.log("执行了");
      const index = this.getNextIndex();
      console.log(index)
      if(this.playMod == RANDOM_MOD && index == this.currentSong.idx){
        this.payNext()
      }else{
        this.currentSong = this.audioListdata[index];
        this.currentSong.idx = index;
        this.play = 2;
        myAudio.load();
        var that=this;
        setTimeout(function(){
          myAudio.play()
          that.$updateScore(5,this.currentSong.id)
        },200)
      }
    },
    descmore() {
      this.isShowPicker = !this.isShowPicker;
      this.shadowContentId = 0;
    },
    cancleBtn() {
        this.isShowPicker = false;
    },
    comments() {
      if (!localStorage.getItem("token")) {
        this.$toLogin()
      } else {
        this.$router.push("/Comment?rid=" + this.compilationId + "&type=2");
      }
    },
    share() {
      this.$Share(this.categorydetail.id, 2, this.categorydetail.title, this.categorydetail.imgUrl,this.$route.fullPath);
    },
    //判断是否是微信浏览器的函数
    isWeiXin() {
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
    },
    // 下载按钮
    download(rid,audioUrl,title) {
      console.log(this.categorydetail)
      if (this.isWeiXin()) {
        MessageBox.alert('请点击右上角在浏览器打开下载').then(action => {});
        return
      }
      if (!localStorage.getItem('token')) {
        this.$router.push("/login")
        return
      }
      controller
        .download({
            rid,
        })
        .then(() => {
          const url = encodeURI(audioUrl)
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', title);
          link.setAttribute('target', "_blank");
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch((err) => {
          Toast({
              message: err.msg,
              duration: 1000,
          });
        })
    },
    changeMod() {
      let playMod = this.playMod + 1;
      if (playMod > SINGLE_CYCLE_MOD) {
        playMod = SEQUENCE_MODE;
      }
      this.playMod = playMod;
      this.$store.commit("setPlayMod", playMod);
    },
    togglePlaying() {
      if (this.play == 1) {
        if(this.audioListdata.length==0){
          MessageBox.alert('暂无数据')
          return
        }
        this.currentSong = this.audioListdata[0];
        this.currentSong.idx = 0;
        myAudio.src=this.currentSong.audioUrl
        myAudio.dataset.aid=this.currentSong.id
        if(myAudio){
          myAudio.load();
        }
        var that=this;
        if(myAudio){
          setTimeout(function(){
            myAudio.play()
            if(this.currentSong)
            that.$updateScore(5,this.currentSong.id)
          },200)
        }

      } else {
        myAudio.pause();
      }
      this.play = this.play == 1 ? "2" : "1";
    },
    bindPickerChange() {}, // 上拉加载
    infinite(done) {
      setTimeout(() => {
        if (this.tabs[this.ishot].lastPage) {
          console.log(
            "这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈"
          );
          this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        } else {
          console.log("进行下一次加载操作");
          // this.focusbool = true;
          this.tabs[this.ishot].page += 1;
          this.getAudioList(this.ishot);
          done(); //进行下一次加载操作
        }
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.set-time-wrap {
  width: 100%;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
  // min-height: 40%;
  z-index: 100;
  .btn {
    height: 80px;
    line-height: 80px;
    width: 100%;
    border-top: 1px solid #f2f2f2; /*no*/
    font-weight: 700;
    text-align: center;
    font-size: 24px;
  }
  .set-time {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .time-item {
    width: 100%;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 80px;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border-bottom: none;
    }
    &.on .check {
      border-color: #e66d4d;
      &:after {
        content: "";
        display: inline-block;
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background-color: #e66d4d;
        border-radius: 50%;
        margin: auto;
      }
    }
    &.on .time {
      opacity: 1;
      margin-right: 20px;
    }
    .time-name {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .check {
      width: 28px;
      height: 28px;
      background: #ffffff;
      border: 1px solid #999999;
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      transition: all 0.4s ease;
    }
    .time {
      color: #e66d4d;
      font-size: 14px;
      right: 30px;
      top: 0;
      bottom: 0;
      position: absolute;
      opacity: 0;
      transition: all 0.4s ease;
    }
  }
}
.pagebg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 646px;
  background-color: #fff;
  z-index: -1;
  filter: blur(40px); //
  background: #222;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
}

.default {
  padding: 32px;
  color: #fff;
  min-height: 300px;

  .aver {
    width: 280px;
    height: 280px;
    background-color: #fff;
    border-radius: 8px;
    margin-right: 30px;
    margin-bottom: 32px;
    float: left;
  }

  .right {
    height: 280px;
    overflow: hidden;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .name {
      font-size: 34px;
      margin-bottom: 20px;
      padding-bottom: 30px;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      .nums {
        font-size: 20px;
        line-height: 30px;
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: 0;
      }
    }

    .detail {
      font-size: 24px;
      height: 80px;
      line-height: 40px;
      // max-height: 80px;
      // margin-bottom: 8px;
      display: -webkit-box;
      /* ! autoprefixer: off */
        -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .detail_more {
      font-size: 38px;
      line-height: 40px;
      text-align: right;
      transform: scale(.5) translate(50%,-50%);
    }

    .detail_on {
      // display: block;
    }

    .control {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .comments {
        width: 36px;
        height: 36px;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_comments2.png)
          no-repeat center center;
        background-size: 100%;
        display: inline-block;
      }

      .share {
        width: 36px;
        height: 36px;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_share2.png)
          no-repeat center center;
        background-size: 100%;
        display: inline-block;
      }

      .collect {
        width: 36px;
        height: 36px;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_collect2.png)
          no-repeat center center;
        background-size: 100%;
        display: inline-block;
      }

      .on {
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_like_new@2x.png)
          no-repeat center center;
        background-size: 100%;
        display: inline-block;
      }

      .download {
        width: 36px;
        height: 36px;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_download2.png)
          no-repeat center center;
        background-size: 100%;
        display: inline-block;
      }
    }
  }

  .bottom {
    margin-top: 32px;
    clear: both;
    height: 98px;
    line-height: 98px;
    background: rgba(255, 255, 255, 0.3);
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    border-radius: 8px;
    .bottom-right {
      display: flex;
      flex: 1;
      flex-direction: row;
      margin-left: 30px;
      justify-content: space-between;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .process {
      // width: 394px;
      width: 61.07%;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: url(https://youyang-cdn.mdshuzhi.com/upload/play_kedu.png)
        no-repeat center center;
      background-size: 100%;
      .progressBarLine{
        width: 100%;
        height: 100%;
      }
      .current {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        opacity: 0.2;
        border-radius: 4px;
        width: 50%;

        &:after {
          content: "";
          position: absolute;
          z-index: 2;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 2px;
          height: 32px;
          background: linear-gradient(
            180deg,
            rgba(248, 165, 49, 1),
            rgba(186, 41, 43, 1)
          );
        }
      }
    }

    .mode {
      width: 48px;
      height: 48px;
      line-height: 48px;

      .img1 {
        width: 100%;
        height: 100%;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_single.png)
          no-repeat center center;
        background-size: 100%;
      }

      .img2 {
        width: 100%;
        height: 100%;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_list.png)
          no-repeat center center;
        background-size: 100%;
      }

      .img3 {
        width: 100%;
        height: 100%;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_random.png)
          no-repeat center center;
        background-size: 100%;
      }
    }

    .play {
      width: 56px;
      height: 56px;
      line-height: 56px;

      .img1 {
        width: 100%;
        height: 100%;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_play1.png)
          no-repeat center center;
        background-size: 100%;
      }

      .img2 {
        width: 100%;
        height: 100%;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_stop1.png)
          no-repeat center center;
        background-size: 100%;
      }
    }

    .settime {
      width: 48px;
      height: 30px;
      border: 2px solid rgba(255, 255, 255, 1);
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      position: relative;

      .time {
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        background: rgba(255, 255, 255, 1);
        border-radius: 12px 12px 12px 2px;
        font-size: 16px;
        color: #323232;
        position: absolute;
        z-index: 1;
        top: -20px;
        left: 50px;
      }
    }
  }
}

.lists {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  z-index: 10;
  background-color: #fff;
  border-radius: 20px 20px 0px 0px;

  .top {
    overflow: hidden;
    height: 104px;
    line-height: 104px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 32px;
    position: relative;

    &:after {
      content: "";
      height: 0;
      display: inline-block;
      position: absolute;
      z-index: 10;
      bottom: 0;
      left: 24px;
      right: 0;
      margin: auto;
      border-bottom: #f2f2f2 1px solid;
    }

    .item {
      float: right;
      padding: 0 24px;
      position: relative;
      color: #a8acbb;
      position: relative;

      &:last-child::after {
        content: "";
        width: 4px;
        height: 36px;
        background-color: #f2f2f2;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -18px;
      }
    }

    .on {
      color: #e66d4d;
    }

    .more {
      float: left;
      font-size: 32px;
      margin-left: 24px;
      color: #323232;

      img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 10px;
      }
    }
  }

  .con {
    height: calc(100vh - (590px + 128px));

    .scroll {
      // height: calc(100vh -64px) !important;
    }

    .item {
      padding: 0 24px;
      margin-bottom: 32px;
      overflow: hidden;
      position: relative;
    }

    .key {
      width: 40px;
      line-height: 80px;
      margin-right: 20px;
      float: left;
    }

    .pic {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      margin-right: 24px;
      float: left;
      background-color: #eee;
      position: relative;

      img {
        border-radius: 8px;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
        background-color: #eee;
      }
    }

    .right {
      overflow: hidden;
    }

    .name {
      color: #323232;
      font-size: 32px;
      margin-bottom: 15px;
      padding-right: 80px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .nums {
      color: #a8acbb;
      font-size: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .play {
      width: 68px;
      height: 68px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 12px;
      margin: auto;
      z-index: 1;
    }
  }
}
/* 列表弹出窗 */
.listShadow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: 9999;
    min-width: 640px;
    max-width: 960px;
    .shadow{
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.32);
      z-index: 99998;
    }
    .showList {
        min-width: 640px;
        max-width: 960px;
        // width: 750px;
        height: 60%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 32px 32px 0 0;
        background-color: #fff;
        z-index: 999;

        .topLineBox {
            width: 100%;
            height: 57px;
            display: flex;
            justify-content: center;
            align-items: center;

            .line {
                display: inline-block;
                width: 120px;
                height: 6px;
                background-color: #ededed;
                border-radius: 3px;
            }
        }

        /* 收起按钮 */
        .cancleBtn {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 116px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32px;
            color: #323232;
            text-align: center;
            border-top: 2px solid rgb(231, 231, 231);
            box-sizing: border-box;
            background-color: #fff;
        }

        /* 弹出窗内容区 */
        .contentBox {
            width: 750px;
            height: 82%;

            .AudioIntroduction {
                width: 750px;
                height: 100%;
                padding: 0 48px;
                box-sizing: border-box;

                span {
                    width: 100%;
                    display: inline-block;
                    text-align: center;
                    font-size: 36px;
                    color: #323232;
                    font-weight: Bold;
                }

                .contentWord {
                    font-size: 30px;
                    color: #323232;
                    margin-top: 44px;
                    line-height: 44px;
                    height: 90%;
                    position: relative;
                }
            }
        }
    }
}

.scroll {
    height: auto !important;
    // height: calc(100vh - 260px) !important;
    padding: 0 25px;
    box-sizing: border-box;
    /deep/ &._v-container{
      top: 150px;
      bottom: 15px;
    //   left: 50%;
    //   transform: translateX(-50%);
      ._v-content{
        padding-bottom: 40px;
      }
    }
}

.scrollIntro {
    height: 90% !important;
    padding-bottom: 100px;
    box-sizing: border-box;
}

// 弹出窗效果
@keyframes bounce-in {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

.fade-enter-active {
    transform-origin: left center;
    animation: bounce-in 0.5s;
}

.fade-leave-active {
    transform-origin: left center;
    animation: bounce-in 0.5s reverse;
}
</style>
